<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            font-size: 50px;
            border-radius: 50%;
            border: 1px solid black;
            margin: 50px auto;
            text-align: center;
            line-height: 200px;
           
        }

        #btn {
            display: block;
            width: 100px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            text-align: center;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="box">10</div>
    <input type="button" value="开始" id="btn">
</body>
<!-- 2. 倒计时 - 单按钮
    - 要求：
        - 每次数字变化，更改随机背景色 -->
<script>
    var obox = document.querySelector(".box")
    var obtn = document.querySelector("#btn")

    var t;
    var i = 0;
    var s = obox.innerHTML;
    console.log()

    obtn.onclick = function () {
        if( i == 0 ){
            start();
            i = 1;
        }else if(i == 1 ){
            stop();
            i = 0;
        }else{
            reset();
            i = 0;
        }  
    }

    function start (){
        clearInterval(t);
        t = setInterval(function () { 
            if(obox.innerHTML <= 1){
                clearInterval(t);
                obox.innerHTML = "结束了"
                i = 2;
                obtn.value = "置位"
            }else{
                obox.innerHTML--;
                obox.style.background = randomcolor();
                // obox.setAttribute("background",randomcolor())
                console.log(obox.getAttribute("backgroundColor"))
            }        
        }, 1000)
        obtn.value = "暂停"
    }

    function stop(){
        clearInterval(t);
        i = 0;
        obtn.value = "继续";

    }
    function reset(){
        obox.innerHTML = s;
        obtn.value = "开始";
    }

    function randomcolor(){
        var a = Math.round(Math.random()*255);
        var b = Math.round(Math.random()*255);
        var c = Math.round(Math.random()*255);    
        return "rgb"+"("+ a+","+ b +","+ c +")";
    }





</script>

</html>